<template>
	<div>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<ul>
			<li v-for="sub in subjectList" :key="sub.id">
				<!-- 传递数据给路由组件 字符串写法 路径中传递得去路由中使用 :占位-->
				<!-- <router-link
					:to="`/school/student/detail?id=${sub.id}&name=${sub.name}&score=${sub.score}`">{{ sub.name }}</router-link>&nbsp;&nbsp; -->
				<!-- 对象写法 -->
				<router-link :to="{
					name: 'subjectDetail',
					query: {//第一种使用query传递数据
						id: sub.id,
						name: sub.name
					},
					params: {//第二种使用params传递数据
						score: sub.score
					}
				}">{{ sub.name }}

				</router-link>
				<input type="text" name="" id="">
			</li>
			<li>
				<h4 :style="{ opacity }">欢迎学习Vue</h4>
			</li>
		</ul>
		<hr>
		<div class="detail">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
export default {
	name: 'StudentDemo',
	data() {
		return {
			name: '张三',
			age: 18,
			subjectList: [{
				id: "001",
				name: '语文',
				score: 80
			}, {
				id: "002",
				name: '数学',
				score: 90
			}, {
				id: "003",
				name: '英语',
				score: 85
			}],
			opacity: 1
		}
	},

/* 	mounted() {
		this.timer = setInterval(() => {
			console.log('setInterval')
			this.opacity -= 0.01
			if (this.opacity <= 0) this.opacity = 1
		}, 16)
	},
	beforeDestroy() {
		clearInterval(this.timer)
	}, */
	activated() {
		console.log('activated')
		this.timer = setInterval(() => {
			console.log('setInterval')
			this.opacity -= 0.01
			if (this.opacity <= 0) this.opacity = 1
		}, 16)
	},
	deactivated() {
		console.log('deactivated')
		clearInterval(this.timer)
	},
}
</script>
<style scoped>
.detail {
	background-color: rgb(31, 239, 142);
}
</style>